<template>
  <div class="wrapper">
    <!--header-->
    <header class="head">
      <div class="nav">
        <h2 class="head-h2">麦粒儿</h2>
        <!--<router-link to="/index/home/huishou">回收</router-link>
        <router-link to="/index/home/fenlei">分类</router-link>-->
      </div>
      <!--<div class="fr margin-right-20 kefu">
        <i class="iconfont">&#xe603;</i>
      </div>-->
    </header>
    <router-view style="padding: 0 3%;"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route: function (newPath, oldPath) {
      this.transitionName = 'fade-left'
    }
  }
}
</script>

<style scoped>
  .wrapper{
    height: 100%;
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    /*opacity: 0;*/
   transform: translateX(-100%);
  }
  .head{
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    left: 0;
    right: 0;
    height: 2rem;
    background: #fff;
    display: flex;
    font-size: 0.8rem;
    /*padding: 0 3%;*/
  }
  .head-h2{
    font-size: .9rem;
  }
  .kefu{
    line-height: 2rem;
    height: 100%;
  }
  .nav{
    width: 100%;
    height: 100%;
    text-align: center;
    /*margin-left: 2rem;*/
    line-height: 2rem;
  }
  .nav a{
    width: 2.5rem;
    box-sizing: border-box;
    margin: 0 .5rem;
    color: #909399;
  }
  .router-link-active{
    padding-bottom: 5px;
    border-bottom: 2px solid #303133;
    color: #303133 !important;
  }
</style>
